<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn" class="test">jhfdsjf</button>

   
    <script>

        //在文档树当中每一个分支下面都是一个节点，跟元素关系一样，也有父子、兄弟、后代关系
        //文档树的最顶端是document节点，代表整个文档，元素节点是element节点，文本也是一个节点，称为text node。
        //在document当中，每一个节点都是一个对象


        //----- 节点类型

        // 1.元素节点，即html标签
        // 2.文本节点，html标签中包含的内容
        // 3.属性节点，开始标签中的元素属性，属性节点比较特殊，它并不是元素节点的子节点
        // 4.文档节点，根节点

        let btn=document.getElementById('btn');
        console.log(btn);
        console.dir(btn);

    </script>

</body>

</html>